<template>
  <div class="comment-goods-item">
    <img :src="item.img" alt="" />
    <p class="name ellipsis-2">{{ item.name }}</p>
    <p class="price">¥{{ item.price }}</p>
    <p class="count">{{ item.commentCount }}人评价</p>
    <a
      @click="$router.push('/member/comment/' + item.id)"
      v-if="type === 'before'"
      class="publish"
      href="javascript:;"
      >发布评价
    </a>
    <a v-if="type === 'after'" class="publish" href="javascript:;">查看评价</a>
  </div>
</template>

<script>
export default {
  name: 'comment-goods-item',
  props: {
    type: {
      type: String
    }
  },
  data () {
    return {
      item: {
        id: 10010,
        img: 'http://zhoushugang.gitee.io/erabbit-client-pc-static/uploads/img/index-new-pd05.png',
        name: '高级的双面呢，男式简约纯羊毛大衣光滑无痕',
        price: '389.70',
        commentCount: 201
      }
    }
  }
}
</script>

<style scoped lang='less'>
.comment-goods-item {
  width: 216px;
  margin-right: 10px;
  margin-bottom: 20px;
  padding: 20px 33px;
  text-align: center;
  cursor: pointer;
  &:hover {
    box-shadow: 0 0 10px #e4e4e4;
  }
  &:nth-child(4n) {
    margin-right: 0;
  }
  img {
    width: 150px;
    height: 150px;
  }
  .name {
    font-size: 16px;
    height: 44px;
    text-align: left;
  }
  .price {
    font-size: 18px;
    color: @priceColor;
    padding: 10px 0;
  }
  .count {
    color: #999;
    padding-bottom: 10px;
  }
  .publish {
    width: 100px;
    height: 32px;
    background: @xtxColor;
    color: #fff;
    text-align: center;
    line-height: 32px;
    display: inline-block;
    border-radius: 4px;
  }
}
</style>
